<style>
    .upload-image {
        background: url('__CDN__/assets/addons/example/img/plus.png') no-repeat center center;
        background-size: 30px 30px;
        height: 30px;
        width: 30px;
        border: 1px solid #ccc;
    }


</style>
<form id="config-form" class="edit-form form-horizontal" role="form" data-toggle="validator" method="POST" action="user/level/edit">
    <div class="panel panel-default panel-intro">
        <div class="panel-body">
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade active in" id="one">

                    <table class="table table-striped table-config">
                        <tbody>

                        <tr data-type="base">
                            <td width="15%">特权</td>
                            <td>
                                <div class="form-group row">

                                    <div class="col-xs-12">
                                        <div class="input-group">
                                            <input id="c-files" data-rule="required" class="form-control" size="50" name="row[privilege_img]" type="text" value="{$datas.config['privilege_img']}">
                                            <div class="input-group-addon no-border no-padding">
                                                <span><button type="button" id="plupload-files" class="btn btn-danger plupload" data-input-id="c-files" data-mimetype="*" data-multiple="true" data-preview-id="p-files"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                                <span><button type="button" id="fachoose-files" class="btn btn-primary fachoose" data-input-id="c-files" data-mimetype="*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                            </div>
                                            <span class="msg-box n-right" for="c-files"></span>
                                        </div>

                                        <!--ul需要添加 data-template和data-name属性，并一一对应且唯一 -->
                                        <ul class="row list-inline plupload-preview" id="p-files" data-template="introtpl" data-name="row[privilege]"></ul>

                                        <!--请注意 ul和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏-->
                                        <textarea name="row[privilege]" class="form-control" style="margin-top:5px;display: none" >{$datas.config['privilege']}</textarea>

                                        <!--这里自定义图片预览的模板 开始-->
                                        <script type="text/html" id="introtpl">
                                            <li class="col-xs-3">
                                                <a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="thumbnail">
                                                    <img src="<%=fullurl%>" class="img-responsive">
                                                </a>
                                                <input type="text" name="row[privilege][<%=index%>]" class="form-control mb-1" placeholder="请输入特权描述" value="<%=value?value:''%>"/>
                                                <a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
                                            </li>
                                        </script>
                                        <!--这里自定义图片预览的模板 结束-->
                                    </div>
                                </div>
                            </td>

                        </tr>

                        <tr data-type="base">
                            <td width="15%">价格</td>
                            <td>
                                <div class="row">
                                    <div class="col-sm-8 col-xs-12">
                                        <input type="text" name="row[price]" value="{$datas.config['price']}" class="form-control" data-rule="required" data-tip="请填写价格"/>
                                    </div>
                                    <div class="col-sm-4"></div>
                                </div>
                            </td>

                        </tr>

                        <tr data-type="base">
                            <td width="15%">权益</td>
                            <td>
                                <div class="row">
                                    <div class="col-sm-8 col-xs-12">
                                        <textarea class="form-control editor" rows="8" name="row[rights]">{$datas.config['rights']}</textarea>
                                    </div>
                                    <div class="col-sm-4"></div>
                                </div>
                            </td>
                        </tr>

                        <tr data-type="base">
                            <td width="15%">提示</td>
                            <td>
                                <div class="row">
                                    <div class="col-sm-8 col-xs-12">
                                        <textarea class="form-control" rows="8" name="row[hint]">{$datas.config['hint']}</textarea>
                                    </div>
                                    <div class="col-sm-4"></div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="form-group layer-footer">
                        <label class="control-label col-xs-12 col-sm-2"></label>
                        <div class="col-xs-12 col-sm-8">
                            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
                            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script>

    require.callback = function () {

        define('backend/user/level', ['jquery', 'form'], function ($, Form) {
            var Controller = {
                index: function () {
                    Form.api.bindevent($("form[role=form]"));

                }
            };
            return Controller;
        });

    }
</script>